
<div class="box box-primary">
    <div class="box-body table-responsive no-padding">
        <table class="table table-hover">
            <thead>
            <tr>
                <th>账号</th>
            </tr>
            </thead>

            <tbody>
            @foreach($paginator as $row)
                <tr>
                    <!--start 根据sku展开发货方式模板-->
                    <td>
                        <span class="grid-expand-grid-row" style="float: left; width: 80%;"
                                  data-inserted="0"
                                  data-name="{{ 'sku-psku_code-'.$row->account_id }}"
                                  data-toggle="collapse"
                                  data-target="#grid-collapse-{{ 'sku-psku_code-'.$row->account_id }}">
                            <a href="javascript:void(0)" data-sku-id="{{ $row->account_id }}" title="点我,展开内容">
                                <i class="fa fa-angle-double-down"></i>&nbsp;&nbsp;{{ $row->account->account ?? '' }}
                            </a>
                        </span>

                        <template class="grid-expand-{{ 'sku-psku_code-'.$row->account_id }}">
                        <tr style="background-color: #ecf0f5;">
                            <td colspan='100%' style='padding:0 !important; border:0;'>
                                <div id="grid-collapse-{{ 'sku-psku_code-'.$row->account_id }}" class="collapse">
                                    <div style="padding: 10px 10px 0 10px;" class="html">
                                        <!-- 国内仓 -->
                                        <table class="table">
                                            <thead>
                                            <tr>
                                                <th width="20%">国家
                                                    &nbsp;
                                                    <i class="fa fa-question-circle" style="color: #3c8dbc" title="设置对应账户下的国家vat..."></i>
                                                </th>
                                                <th width="20%">vat</th>
                                                <th>备注</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <?php $data = \App\Models\Basics\AmazonAccountCountry::query()->where('account_id', $row->account_id)->get(); ?>
                                                @foreach($data as $item)
                                                <tr>
                                                    <td > {{ $item->country->country ?? '' }} </td>
                                                    <td>
                                                        <a class="grid-editable-vat" href="#"
                                                           data-type="text"
                                                           data-pk="{{ $item->id }}"
                                                           data-url="{{ '/xqc/basics/amazon-account-country/'.$item->id }}"
                                                           data-value="{{ $item->vat ?? 0  }}"> {{ $item->vat ?? 0 }}</a>
                                                    </td>
                                                    <td>
                                                        <a class="grid-editable-remarks" href="#" data-type="text"
                                                           data-pk="{{ $item->id }}"
                                                           data-url="{{ '/xqc/basics/amazon-account-country/'.$item->id }}"
                                                           data-value="{{ $item->remarks ?? '' }}">{{ $item->remarks ?? '' }}</a>
                                                    </td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        </template>

                    </td>
                    <!--end 列展开结束-->
                </tr>

            @endforeach
            </tbody>
        </table>
    </div>
</div>

<script language="JavaScript" type="text/javascript">
    $(function () {

        //列展开 (默认添加模板数据)
        $('.grid-expand-grid-row').each(function() {
            let name = $(this).data('name');
            let row = $(this).closest('tr');
            row.after($('template.grid-expand-'+name).html());
        });

        //列展开
        $('.grid-expand-grid-row').on('click', function () {
            if ($(this).data('inserted') == '0') {
                $(this).data('inserted', 1);
            }
            $("i", this).toggleClass("fa-angle-double-down fa-angle-double-up");
        });

        //更新
        let _editable = function (name,showbuttons = false,mode = "inline") {
            $('.grid-editable-'+name).editable({
                "emptytext":"<i class=\"fa fa-pencil\"><\/i>",
                "showbuttons":showbuttons,
                "mode":mode,
                "name":name,
                success: function(response, newValue) {
                    if (typeof response === 'object') {
                        if (response.status) {
                            toastr.success(response.message);
                        } else {
                            swal(response.message, '', 'error');
                        }
                    }
                }
            });
        };
        _editable('vat');
        _editable('remarks');

    });
</script>
